<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>简单地图</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
}

* {
	margin: 0px;
	padding: 0px;
}

body, button, input, select, textarea {
	font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}

p {
	width: 603px;
	padding-top: 3px;
	overflow: hidden;
}

.btn {
	width: 142px;
}

#container {
	min-width: 600px;
	min-height: 767px;
}
</style>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&libraries=convertor,drawing"></script>
<script>
function init(){

	var map = new qq.maps.Map(document.getElementById("container"),{
	        center:  new qq.maps.LatLng(39.916527,116.397128),
	        zoom: 13
	});
	//变换中心点
	 map.panTo(new qq.maps.LatLng(39.916527,116.397128));
	//增加自定义样式
	var anchor = new qq.maps.Point(6, 6),
      size = new qq.maps.Size(24, 24),
      origin = new qq.maps.Point(0, 0),
      icon = new qq.maps.MarkerImage('../images/center.gif', size, origin, anchor);
    var marker = new qq.maps.Marker({
      icon: icon,
      map: map,
      title:"aa",
      position:map.getCenter()});
    //转换百度坐标为腾讯坐标
    qq.maps.convertor.translate(new qq.maps.LatLng(39.915,116.404), 3, function(res){
        latlng = res[0];
        var marker = new qq.maps.Marker({
            map : map,
           // position : latlng
        });
        marker.setPosition(latlng);
    });
    //添加折线覆盖物,
    var polygon = new qq.maps.Polygon({
        path: [
            new qq.maps.LatLng(39.948712,116.448168),
            new qq.maps.LatLng(39.928837,116.404394),
            new qq.maps.LatLng(39.920412,116.457609)
        ],
        strokeColor: '#33ca3e',
        strokeWeight: 8,
        fillColor: '#446acc',
        map: map
    });
    var bounds=polygon.getBounds();
    //添加定时器
    setTimeout(function(){
    	//以覆盖物为中心
        map.fitBounds(bounds);
    },3000);
    //添加监听事件
    var polyline = new qq.maps.Polyline({
        path: [
            new qq.maps.LatLng(39.910, 116.399),
            new qq.maps.LatLng(39.920, 116.405),
            new qq.maps.LatLng(39.930, 116.420)
        ],
        strokeColor: '#000000',
        strokeWeight: 10,
        editable:false,
        map: map
    });
	qq.maps.event.addListener(polyline,"mouseover",function(){
		alert("您执行了mouseover事件");
	});
	//为每个标注添加点击事件
	var infoWin = new qq.maps.InfoWindow({
        map: map
    });
    var latlngs = [
        new qq.maps.LatLng(39.91474,116.37333),
        new qq.maps.LatLng(39.91447,116.39336),
        new qq.maps.LatLng(39.90884,116.41306)
    ];

    for(var i = 0;i < latlngs.length; i++) {
        (function(n){
            var marker = new qq.maps.Marker({
                position: latlngs[n],
                map: map
            });
            qq.maps.event.addListener(marker, 'click', function() {
                infoWin.open();
                infoWin.setContent('<div style="text-align:center;white-space:'+
                'nowrap;margin:10px;">这是第 ' +
                n + ' 个标注</div>');
                infoWin.setPosition(latlngs[n]);
            });
        })(i);
    }
    //定位
    function getLocation(){
    	  //判断是否支持 获取本地位置
    	  if (navigator.geolocation)
    	    {
    	    navigator.geolocation.getCurrentPosition(showPosition);
    	    }
    	  else{x.innerHTML="浏览器不支持定位.";}
    	  }
    	function showPosition(position)
    	  {
    	var lat=position.coords.latitude; 
    	var lng=position.coords.longitude;
    	//调用地图命名空间中的转换接口   type的可选值为 1:gps经纬度，2:搜狗经纬度，3:百度经纬度，4:mapbar经纬度，5:google经纬度，6:搜狗墨卡托
    	qq.maps.convertor.translate(new qq.maps.LatLng(lat,lng), 1, function(res){
    	  //取出经纬度并且赋值
    	     latlng = res[0];
    	  
    	  var map = new qq.maps.Map(document.getElementById("container"),{
    	        center:  latlng,
    	        zoom: 13
    	    });
    	    //设置marker标记
    	   var marker = new qq.maps.Marker({
    	            map : map,
    	            position : latlng
    	        });
    	    });
    	  }
    //绘图
   	 var drawingManager = new qq.maps.drawing.DrawingManager({
   	        drawingMode: qq.maps.drawing.OverlayType.MARKER,
   	        drawingControl: true,
   	        drawingControlOptions: {
   	            position: qq.maps.ControlPosition.TOP_CENTER,
   	            drawingModes: [
   	                qq.maps.drawing.OverlayType.MARKER,
   	                qq.maps.drawing.OverlayType.POLYGON,
   	                qq.maps.drawing.OverlayType.POLYLINE
   	            ]
   	        },
   	        markerOptions: {
   	            fillColor: new qq.maps.Color(255, 208, 70, 0.3),
   	            strokeColor: new qq.maps.Color(88, 88, 88, 1),
   	            strokeWeight: 3,
   	            clickable: true
   	        },
   	        polygonOptions: {
   	        	editable:true
   	        }
   	    });
   	 qq.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
         infoWin.open();
         infoWin.setContent('<div style="text-align:center;white-space:'+
         'nowrap;margin:10px;">这是第 ' +
         n + ' 个标注</div>');
         infoWin.setPosition(latlngs[n]);
     });
   	    drawingManager.setMap(map);
}
</script>
</head>
<body onload="init()">
	<!--   定义地图显示容器   -->
	<div id="container"></div>
</body>
</html>
